import React, { Fragment, useEffect, useState } from 'react'
import { Modal, Descriptions, Divider, message, Timeline, Table, Tag, Button } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import moment from 'moment'
import { getDetail } from '../../request/order'
import './style.scss'

function OrderDetail(props) {
  const { visible, close, orderNo, orderStatusMap } = props
  const { Item } = Descriptions
  const [detail, setDetail] = useState({ order_logs: [], relate_card_order: [] })
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    getOrderDetail(orderNo).catch(e => console.log(e.message))
  }, [])

  const getOrderDetail = async(orderNo) => {
    setIsLoading(true)
    const { code, message: errMsg, data } = await getDetail({ order_no: orderNo })
    setIsLoading(false)
    if (code) {
      return message.error(errMsg)
    }
    setDetail({
      ...data,
      address: `${data.province} ${data.city} ${data.area} ${data.address}`,
      deliverTime: data.deliver_at ? moment(data.deliver_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-',
      createdTime: data.created_at ? moment(data.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-',
      activeTime: data.active_at ? moment(data.active_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-',
      order_logs: data.order_logs || []
    })
  }
  const statusColorMap = {
    1: 'lime',
    3: 'cyan',
    8: '#87d068',
    10: 'gold',
    11: '#f50',
    12: 'red'
  }

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'order_no'
    },
    {
      title: '下单时间',
      dataIndex: 'created_at',
      render: text => <span>{moment(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>
    },
    {
      title: '订单状态',
      render: (text, record) => (
        <Fragment>
          {orderStatusMap[record.status] ? (
            <Tag color={statusColorMap[record.status] || 'blue'}>{orderStatusMap[record.status]}</Tag>
          ) : (
            <span>-</span>
          )
          }
        </Fragment>
      )
    },
    {
      title: '操作',
      align: 'center',
      render: (text, record) => (
        <Fragment>
          <Button size="small" onClick={() => {
            getOrderDetail(record.order_no)
          }}>查看详情</Button>
        </Fragment>
      )
    }
  ]

  const detailFields = [
    { label: '姓名', key: 'true_name' },
    { label: '身份证号', key: 'idcard' },
    { label: '电话号码', key: 'phone' },
    { label: '用户来源', key: 'ad_tp_name' },
    { label: '订单号', key: 'order_no' },
    { label: '新号码', key: 'new_phone' },
    { label: '下单时间', key: 'createdTime' },
    { label: '激活时间', key: 'activeTime' },
    { label: '下单套餐', key: 'partner_goods_name' },
    { label: '订单状态', key: 'status_name' },
    { label: '地址', key: 'address' }
  ]

  const expressFields = [
    { label: '发货时间：', key: 'deliverTime' },
    { label: '快递公司', key: 'express' },
    { label: '快递单号', key: 'express_no' }
  ]

  return (
    <div className="order-detail">
      <Modal
        visible={visible}
        title={'订单详情 ' + orderNo}
        footer={null}
        width="80%"
        onCancel={close}
        maskClosable={false}
        className="order-detail--modal"
      >
        <Descriptions title="订单信息" bordered>
          {detailFields.map((item, index) => (
            <Item label={item.label} key={index}>{detail[item.key] || '-'}</Item>
          ))}
        </Descriptions>
        <Divider/>
        <h3>关联订单<span>(该用户一个月内的订单)</span></h3>
        <Table
          size="small"
          bordered={true}
          dataSource={detail.relate_card_order}
          columns={columns}
          pagination={false}
          loading={isLoading}
        />
        {detail.order_no !== orderNo && (
          <p>
            <br/>
            <Button type="primary" size="small" onClick={() => getOrderDetail(orderNo)}>显示主订单信息</Button>
          </p>
        )}
        <Divider/>
        <Descriptions title="快递信息" bordered>
          {expressFields.map((item, index) => (
            <Item label={item.label} key={index}>{detail[item.key] || '-'}</Item>
          ))}
        </Descriptions>
        <Divider/>
        { /*
        <h3>证件照片</h3><br/>
        {detail.idcard_pic ? (
          <div className="idcard_pic">
            {detail.idcard_pic.pic_url1 && (
              <img src={detail.idcard_pic.pic_url1} alt=""/>
            )}
            {detail.idcard_pic.pic_url2 && (
              <img src={detail.idcard_pic.pic_url2} alt=""/>
            )}
            {detail.idcard_pic.pic_url3 && (
              <img src={detail.idcard_pic.pic_url3} alt=""/>
            )}
          </div>
        ) : (
          <span>无</span>
        )}
        <Divider/>
        */ }
        <h3>操作记录</h3><br/>
        {detail.order_logs.length > 0 ? (
          <Timeline mode="left">
            {detail.order_logs.map(item => (
              <Timeline.Item
                key={item.id}
              >
                {item.log} -
                {moment(item.created_at * 1000).format('YYYY-MM-DD HH:mm:ss')}
              </Timeline.Item>
            ))}
          </Timeline>
        ) : (
          <span>无</span>
        )}
      </Modal>
    </div>
  )
}

export default connect(state => ({
  orderStatusMap: state.getIn(['order', 'orderStatusMap'])
}), null)(withRouter(OrderDetail))
